<template>
  <div id="video-item">
    <div  class="video-img">
      <img :src="picture"/>
    </div>

    <div class="video-bottom">
      <div class="video-bottom-left">
        <img :src="headPortrait" class="video-bottom-left-headPortrait" />
      </div>

      <div class="video-bottom-right">
        <i class="video-bottom-right-i">{{name}}</i><br>
        <i class="el-icon-location"></i> <i class="video-bottom-right-loc">{{loc}}</i>
      </div>
    </div>


    <div class="video-right">
      <el-menu class="el-menu-vertical-demo" >
          <img src="~assets/xin.png"/>
        <el-menu-item index="2" >
          <i class="el-icon-chat-line-square"></i>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-s-opportunity"></i>
        </el-menu-item>
        <div class="i"></div>
        <el-menu-item index="4" >
          <i class="el-icon-more"></i>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>

export default {
  props:{
    picture:{
      type: String,
      default(){
        return require("assets/img/11.png")
      }
    },
    headPortrait:{
      type: String,
      default(){
        return require("assets/img/1.jpg")
      }
    },
    loc:{
      type: String,
      default(){
        return "Shan Tou"
      }
    },
    name:{
      type: String,
      default(){
        return "Lin Kai Xin"
      }
    }
  }
}
</script>

<style lang="less" scoped>
#video-item {
    position: relative;
    overflow: hidden;
    margin: 0.2rem 0;
    
    .video-img{
      overflow: hidden;
      z-index: 0;
      img{
      width: 9.7rem;
      height: 5.6rem;
      z-index: 0;
      }
    }
  .video-bottom {
    position:absolute;
    width: 7.133rem;
    height: 1.733rem;
    bottom: 0px;
    left: 0px;
    display: flex;
    .video-bottom-left {
      width: 1.70rem;
      height: 1.733rem;
      margin-right: 0.6rem;
      .video-bottom-left-headPortrait {
        display: block;
        width:1.26rem;
        height: 1.26rem;
        border-radius: 95px;
        margin: auto;
        margin-top:0.2rem;
        z-index: 1;
      }
    }
    .video-bottom-right {
      flex: 1;
      z-index: 2;
      .video-bottom-right-i {
        color: rgb(255, 255, 255);
          line-height: 0.8rem;
        font-size: 0.5rem;
      }

      .video-bottom-right-loc {
          font-size: 0.5rem;
      }
    }
  }
  .video-right {
    position: absolute;
    top: 0px;
    right: 0px;
    
    .el-menu-vertical-demo {
      width: 1.2rem;
      height: 5.6rem;
      text-align: center;
      img{
        width:1.2rem; 
        height:1.2rem;
      }
      .el-menu-item {
        height:1.2rem !important;
        position: relative;
        i{
          display: block;
          width: 1px;
          height: 1px;
          position:absolute;
          top: 0.25rem;
          left: 0.25rem;
        }
      }
    }
  }
}
.i{
  width: 1.2rem;
  height: 0.8rem;
}
.is-active {
  background-color: white !important;
}


.el-icon-chat-line-square::before{
  font-size:0.7rem;
  color: rgb(133, 210, 197);
}
.el-icon-s-opportunity::before{
  font-size:0.7rem;
  color: rgb(250, 219, 155);
}
.el-icon-more::before{
  font-size: 0.7rem;
  color: rgb(250, 219, 155);
}
.el-icon-location::before {
  font-size: 0.6rem;
  color: rgb(133, 210, 197);
}
</style>
